<section class="content-header">
  <h1>
    Contests
    <small>{{ ctrl.contests.length }} contests</small>
  </h1>
  <ol class="breadcrumb">
    <li class="active"><i class="fa fa-flag"></i> Contests</li>
  </ol>
</section>

<section class="content">
  <div class="box box-danger box-solid">
    <div class="box-header with-border">
      <h3 class="box-title">{{ 'ui.page.contest.list.box.activeContests' | translate }}</h3>
    </div>
    <div class="box-body">
      <table class="table table-hover table-striped">
        <tbody>
        <tr>
          <th>{{ 'ui.page.contest.list.col.name' | translate }}</th>
          <th style="width:120px">{{ 'ui.page.contest.list.col.state' | translate }}</th>
          <th style="width:120px">{{ 'ui.page.contest.list.col.regState' | translate }}</th>
          <th style="width:150px">{{ 'ui.page.contest.list.col.regBegin' | translate }}</th>
          <th style="width:150px">{{ 'ui.page.contest.list.col.begin' | translate }}</th>
          <th style="width:150px">{{ 'ui.page.contest.list.col.end' | translate }}</th>
        </tr>
        <tr ng-repeat="contest in ctrl.contests | filter: ctrl.filterActiveContest">
          <td>{{ contest.name }} <span ng-show="contest.register">(已注册, <span ng-show="contest.register && contest.register.meta.validated">已验证</span><a href="javascript:;" ng-click="ctrl.doRegister(contest._id)" ng-show="!contest.register || !contest.register.meta.validated">未验证</a>)</span><a ng-click="ctrl.doRegister(contest._id)" ng-show="(!contest.register) && contest.regState === 'OPEN'" href="javascript:;">注册参加</a></td>
          <td>{{ ('contest.state.' + contest.state) | translate }}</td>
          <td>{{ ('contest.regState.' + contest.regState) | translate }}</td>
          <td><span data-balloon="{{ contest.regBegin | date: 'yyyy-MM-dd (EEE) HH:mm:ss Z' }}">{{ contest.regBegin | amTimeAgo }}</span></td>
          <td><span data-balloon="{{ contest.begin | date: 'yyyy-MM-dd (EEE) HH:mm:ss Z' }}">{{ contest.begin | amTimeAgo }}</span></td>
          <td><span data-balloon="{{ contest.end | date: 'yyyy-MM-dd (EEE) HH:mm:ss Z' }}">{{ contest.end | amTimeAgo }}</span></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="box">
    <div class="box-header with-border">
      <h3 class="box-title">{{ 'ui.page.contest.list.box.allContests' | translate }}</h3>
    </div>
    <div class="box-body">
      <table class="table table-hover table-striped">
        <tbody>
        <tr>
          <th>{{ 'ui.page.contest.list.col.name' | translate }}</th>
          <th style="width:120px">{{ 'ui.page.contest.list.col.state' | translate }}</th>
          <th style="width:120px">{{ 'ui.page.contest.list.col.regState' | translate }}</th>
          <th style="width:150px">{{ 'ui.page.contest.list.col.regBegin' | translate }}</th>
          <th style="width:150px">{{ 'ui.page.contest.list.col.begin' | translate }}</th>
          <th style="width:150px">{{ 'ui.page.contest.list.col.end' | translate }}</th>
        </tr>
        <tr ng-repeat="contest in ctrl.contests | orderBy: ctrl.orderContest:true">
          <td>{{ contest.name }} <span ng-show="contest.register">(已注册)</span></td>
          <td>{{ ('contest.state.' + contest.state) | translate }}</td>
          <td>{{ ('contest.regState.' + contest.regState) | translate }}</td>
          <td><span data-balloon="{{ contest.regBegin | date: 'yyyy-MM-dd (EEE) HH:mm:ss Z' }}">{{ contest.regBegin | amCalendar }}</span></td>
          <td><span data-balloon="{{ contest.begin | date: 'yyyy-MM-dd (EEE) HH:mm:ss Z' }}">{{ contest.begin | amCalendar }}</span></td>
          <td><span data-balloon="{{ contest.end | date: 'yyyy-MM-dd (EEE) HH:mm:ss Z' }}">{{ contest.end | amCalendar }}</span></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>
